import axios from "axios";
import React, { useState, useMemo } from "react";


// React.memo() 是用来缓存一个组件用的，只有当前组件内容发生变化的时候才会被重新渲染
//  子组件
const Child = React.memo((props) =>{
    console.log("子组件执行了");
    
    return <h1>
        Child - {props.name} - {props.age}
    </h1>
    
    /*
        React.memo 缓存组件用的
        useCallback
        useMemo
    */
})
function App() {

    const [count,setCount] = useState(100)
    const [name] = useState("老王")
    const [age] = useState(18)


    // const info ={
    //     name,age
    // }


    const info =  useMemo(()=>{{
        return {name,age}
    }},[])

    return <>
        <h1 id="title">App - {count}</h1>
        <button onClick={()=>setCount(count + 1)}>点击加1</button>
        
        <hr />

        <Child name ={name} age={age}></Child>

    
    </>
        
}


export default App